.bg {
  @apply fixed top-0 left-0 right-0 bottom-0;
  @apply bg-cover bg-center bg-no-repeat -m-4 bg-gray-600 ease-linear transition-opacity duration-700;

  filter: blur(5px);
}

.wrapper {
  @apply absolute flex justify-center flex-col items-center;

  top: 50%;
  left: 50%;
  width: 300px;
  transform: translate(-50%, -50%);
}

.input-wrap {
  position: relative;
  overflow: hidden;
  margin: 2rem 0;
  & input {
    position: relative;
    -webkit-text-fill-color: #eee;
    color: #eee;

    @apply bg-white bg-opacity-20 rounded-3xl tracking-wider;

    padding: 3px 14px;
    line-height: 1.8;
    backdrop-filter: blur(24px);
  }

  & * {
    outline: none;
  }
}

form {
  @apply flex flex-col items-center justify-center;
}
